<template>
  <div>
    <van-swipe-cell v-for="item in list" :key="item.id">
     <div>
 <van-checkbox v-model="item.isSelected">
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
      /></van-checkbox>
     </div>
      <template #right>
        <van-button
          @click="removeItem(item)"
          square
          text="删除"
          type="danger"
          class="delete-button"
        />
        
      </template>
    </van-swipe-cell>
    <van-submit-bar :price="total" button-text="下单" @submit="onSubmit">
      <van-checkbox v-model="Allchecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { cartList, deleteAction, submitAction } from "@/api/cart";
export default {
  data() {
    return {
      //   checked: false,
      //   Allchecked: false,
      list: {},
      //   total: "",
    };
  },
  computed: {
    //   全选
    Allchecked: {
      get() {
        return this.list.every((el) => el.isSelected);
      },
      set(val) {
        this.list.forEach((el) => {
          el.isSelected = val;
        });
      },
    },
    total() {
      return this.list.reduce((total, current) => {
        if (current.isSelected) {
          return total + current.number * current.retail_price * 100;
        } else {
          return total;
        }
      }, 0);
    },
  },
  created() {
    cartList({
      openId: localStorage.getItem("openId"),
    }).then((res) => {
      //   this.list = res.data;
      res.data.forEach((el) => {
        el.isSelected = false;
      });
      this.list = res.data;
      console.log(this.list);
    });
  },
  mounted() {},
  methods: {
    onSubmit() {
      var arr = this.list.filter((el) => el.isSelected);
      var newArr = arr.map((el) => {
        return el.goods_id;
      });
      // console.log(newArr.join(","));
      submitAction({
        allPrise: this.total,
        goodsId: newArr.join(","),
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
      });
      this.$router.push("/cart/order");
    },
    init() {
      cartList({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        //   this.list = res.data;
        res.data.forEach((el) => {
          el.isSelected = false;
        });
        this.list = res.data;
        console.log(this.list);
      });
    },
    removeItem(item) {
      deleteAction({
        // var index=this.list.findIndex(el=>el.id==val.id),
        id: item.id,
      }).then((res) => {
        console.log(res);
        this.init();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.van-swipe-cell {
  margin-bottom: 1.125rem;
}
.van-card {
    position: relative;
    box-sizing: border-box;
    color: #323233;
    font-size: 0.32rem;
    background-color: #fafafa;
    width: 180%;
    }
.van-checkbox__label {
  margin-left: 0.213333rem;
  color: #323233;
  line-height: 0.533333rem;
  width: 100%;
}
.van-card__content {
  justify-content: space-evenly;
  text-align: center;
}
// .van-button--danger {
//   // height: 145px;
//   color: #fff;
//   background-color: #ee0a24;
//   border: 0.026667rem solid #ee0a24;
// }

</style>
